<template>
	<view class="navBarBlank" :style="`width:100vw;height:${phoneTop}px;backgroundColor:${props.backColor};`"> 
	<view v-if="props.showHeardInfo" class="info">
		<view class="left">
			13:35
		</view>
		<view class="right">
			中国移动
		</view>
	</view>
	</view>
</template>

<script setup>
	import {
		onMounted
	} from 'vue';
	
	const props = defineProps({
		/*背景色*/
		backColor: {
			type: String, 
			default: 'transparent'
		},
		/*是否显示顶部栏信息*/
		showHeardInfo:{
			type:Boolean,
			default:false
		}
	})
	
	let phoneTop = ref(0)
	onShow(() => {
		const phoneInfo = uni.getSystemInfoSync();// 获取手机系统信息
		let statusBarObj = {
			statusBarHeight: 20/* 状态栏默认高度 */ 
		}
		
		// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
		statusBarObj.statusBarHeight = phoneInfo.statusBarHeight; 
		let _tempheight = phoneInfo.statusBarHeight==0?45:phoneInfo.statusBarHeight
		phoneTop.value =_tempheight+20
		//console.log(111,phoneInfo,phoneTop.value)
	})
</script>

<style lang="scss" scoped>
	// .navBarBlank {
	// 	background-color: #ffffff;
	// }
	.info{
		padding: 32rpx 32rpx;
		@include flex-teng(row,space-between);
		font-size: 24rpx;
	}
</style>